之前有输出过 《产品色彩系统居然可以套数学公式？》和《配色的用户体验：颜色对比度》两篇关于颜色的内容。可后续还是有朋友陆陆续续在问我关于配色的问题。

集美们，怎么说呢...配色的方案其实很多，各个大厂UED团队分享的配色流程与方案，都值得去参考和学习。我之前介绍的方法，其实也只是众多方法中的一个罢了，不用过于死扣。

你认为有用的方法，可以收入囊中；不太认可的方法，可以浅尝辄止。关键是摸清这些方法背后，传递的对颜色的知识和配色的奥义。你不需要纠结哪一种方法是正确的，但一定要了解颜色背后的原理，才可得渔非鱼。

例如对“色环”、“明度”的认识，可以让你对颜色的运用更加和谐。对“颜色对比度”、“WCAG标准”有所了解，可以让你在用户体验的优化上，更有理有据。

但在还没有熟练积累理论知识之前，既然大家对配色的需求这么大，我整理了5个适合UI的在线配色工具。希望能够帮助到你们。

1.COOLORS
· 关键词：自主配色 | 颜色库 | 明度判断
COOLORS 功能很全，可以以基础色生成配色，也可以参考网站提供的优质配色方案。亮点是支持以明度方式查看颜色组。

同时 COOLORS 提供iOS端移动版和Adobe插件（不过这些功能需要付费），绑定账号后可以云端搭建个人颜色库，这让一些需要在iPad上创作或者想让颜色库插件化的朋友，对配色组的管理变得更便捷了。

2.Color Hunt
· 关键词：主色辅色 | 配色标签
Color Hunt 无法根据基础色生成配色，只能根据网站提供的色板来选取你心仪的色组。

但它的特色在于给配色方案引入了标签，针对你当前的产品或页面的调性，你可以根据例如「金色」、「春天」、「圣诞节」等等标签，对配色组进行筛选。

并且 Color Hunt 将主色以大色块展示，让你对该色板内的主色、辅色的应用心中有数。

3.AdobeColor
· 关键词：色彩调和 | 视觉残障体验 | Behance
一直致力于视觉研究，拥有 Photoshop、Illustrator 等众多设计产品的 Adobe 公司，也有在线配色生成器，采用的配色方法也更加专业，支持在色环上以互补色、对比色这样的色彩调和方式生成配色。

而且拥有大厂光环的 Adobe 对色彩的用户体验也更加注重，带有色盲辅助工具，时刻提醒着设计师要注重色彩的友好体验。

因为 Adobe 产品线的优势，该工具还和 Behance 的接口打通，为你推荐在 Behance 上热门作品的配色方案！真香！

4.WebGradients
· 关键词：渐变色 | CSS代码生成
UI设计中，为了提升页面质感和趣味性，对于渐变色的运用场景也非常多。WebGradients 就是一个拥有大量渐变色参考模板的工具网站。

虽然不支持自主添加基础色，生成渐变参考，但我认为WebGradients 是我看过大量渐变参考网站中，模板质量较高的，并且配色更适合UI设计师（相比一下可能更适合美术绘画类的参考网站而言），值得一淘。

并且 WebGradients 支持CSS代码拷贝，为前端小哥省事了~真是维护同事关系的好帮手~

5.Grabient
· 关键词：渐变色 | 自主调色 | CSS代码生成
和 WebGradients 大量的渐变模板比起来，Grabient 提供的渐变方案较少一些，但允许你手动添加更多的颜色做渐变，并且可以改变渐变角度。

改变了颜色和角度之后，还可以生成CSS代码，也是一个UI和前端的好帮手。配色参考价值没有 WebGradients 高，但实用性上更胜一筹。

参考网站很多，该怎么用？

配色参考网站其实很多，远远不止我推荐的这5个，但是它们是我筛选出来，自认为更适合UI设计师的5个。工具不在于数量，而在于质量！

参考网站那么多，真正会用的朋友可能并不太多。配色网站并不是直接拿上配色，就开始往页面或作品中套的。

注意以下的点和步骤，可以帮助你更好地使用配色工具：

1.明度的调节
配色网站的受众群很多，为了方便让各个领域的设计师使用，给出的配色方案可能比较混杂。比起一些夸张的方案，UI设计师可能需要的是更加理性的配色。

协调的明度，让主色、辅色更加和谐，我在 《产品色彩系统居然可以套数学公式？》中就有讲过。还不知道明度的意义的朋友，建议阅读。这是我为什么推荐 COOLORS 的原因。

2.主色辅色的比例
尽管是在线生成的不错的配色方案，但也不要无脑地往页面里随意填充，依然是要区分主色、辅色、点缀色。并且对主色、辅色、点缀色运用的比例大约在6：3：1左右。

这一点和选色无关，而是和色彩的运用有关。很多朋友用了在线配色工具去设计产品或者页面，会有“为什么搞出来还是不好看”的问题，很可能并不是因为你选错了颜色，而是你用错了颜色。

3.颜色的用户体验

会用色之后，就可以尝试多考虑颜色的进阶知识点了：用户体验，例如我在《配色的用户体验：颜色对比度》中提到的一样。这也是我推荐 AdobeColor 配色工具的原因。

为什么选出来的主色、辅色之后，但可读性却很差，应该如何调整，这些部分可能就不是在线工具能够帮到你的了，你一定要把这些知识转化到脑中，然后进行一系列手动微调。

所以说多个工具配合使用，才是最有效的。前面推荐的工具，各有各的特色与亮点，我在文中没办法讲得太详细，但你可以探索它们更多的功能点。
希望这些工具和我告诉你的注意点，能够帮你解决到配色问题~


本文原创，未经作者允许不可转载！
更多内容，欢迎关注作者微信公众号：UCD耍家！